define([],function (){
    return {
        name: "mu-icon",
        template:`<el-icon size="20" v-if="value" @click="shows" style="margin: 5px;cursor: pointer"><Component :is="value"></Component></el-icon><el-icon v-else @click="shows" style="margin: 5px;cursor: pointer"><Plus /></el-icon><el-dialog
    v-model="dialogVisible"
    destroy-on-close
    center
    width="500"
    :before-close="handleClose"
  >
  <el-icon v-for="item in allIcons" size="20" style="margin: 5px;cursor: pointer" @click="change(item)">
  <Component :is="item"></Component>
</el-icon>
  </el-dialog>`,
        props:{
            modelValue:{
                type:String,
                default:[]
            }
        },
        emits:['update:modelValue'],
        data(){
            return {
                value:this.modelValue,
                allIcons:[],
                dialogVisible:false
            }
        },
        mounted(){
            console.log(this.value)
            for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
                // console.log(key)
                this.allIcons.push(key)
                // app.component(key, component)
            }
        },
        methods:{
            handleClose(){
                this.dialogVisible = false;
            },
            shows(){
                this.dialogVisible = true;
            },
            change(item){
                console.log(item)
                this.value = item;
                this.$emit('update:modelValue',item);
                this.dialogVisible = false;
            }
        }
    }
})